<template>
  <div id="cart_container">
    <header-nav headTitle="购物车" go-back="true"></header-nav>
    <ul class="cart_list">
      <li v-for="(item, index) in cartList" :key="index" v-if="item">
        <h3>{{ item.name }}</h3>
        <section class="item">
          <p class="img"><img :src="productBaseUrl + item.image" alt=""></p>
          <div class="cnt">
            <p class="num"><span class="cyc-icon reduce" @click="reduceFromcart(item.id)">-</span><input type="text" :value="item.num"><span class="cyc-icon add" @click="addToCart(item.id, item.name, item.price, item.image)">+</span></p>
            <p class="price">￥ {{item.num * item.price}}</p>
          </div>
        </section>
      </li>
    </ul>
    <section class="cart_total_price">
      <p>TOTAL</p>
      <p>￥ {{ totalPrice }}</p>
    </section>
    <a class="shopping__cart__checkout" @click="checkout()">Checkout</a>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import HeaderNav from '../../components/HeaderNav.vue'
  import FooterNav from '../../components/FooterNav.vue'
  import { getStore } from '../../config/mUtils'
  import { checkout } from '../../service/getData'
  export default {
  	data() {
  		return {
  			totalPrice: 0,
        productBaseUrl: 'https://s3.cn-north-1.amazonaws.com.cn/cdn.smartbuyglasses.cn/image/en/images/',
      }
    },
    components: {
      HeaderNav,
      FooterNav,
    },
    computed: {
      ...mapState([
        'cartList', 'userInfo'
      ]),
    },
    created() {
      this.INIT_BUYCART();
      this.initTotalPrice();
    },
    methods: {
      ...mapMutations([
        'INIT_BUYCART', 'ADD_CART', 'REDUCE_CART', 'CLEAR_CART'
      ]),
      initTotalPrice() {
        if(this.cartList) {
          this.totalPrice = 0
          Object.values(this.cartList).forEach(item => {
            if(item.num > 0) {
              this.totalPrice += item.num * item.price
            }
          })
        }
      },
      addToCart(product_id, name, price, image) {
      	this.ADD_CART({product_id, name, price, image})
        this.initTotalPrice()
      },
      reduceFromcart(product_id) {
      	this.REDUCE_CART(product_id)
        this.initTotalPrice()
      },
      async checkout() {
        let user_id = Number(getStore('user_id'))
        let entities = []
        Object.values(this.cartList).forEach(item => {
          let obj =  {
            attrs: [],
            extra: [],
            product_id: item.id,
            name: item.name,
            image: item.image,
            price: item.price,
            quantity: item.num
          }
          entities.push(obj)
          obj = null
        })
        if(user_id) {
        	await checkout(user_id, entities).then(res => {
            console.log(res.data)
            this.$router.push({path: '/payment', query: {cart_id: res.data.cart_id}})
          })
          this.CLEAR_CART()
        } else {
        	this.$router.push('/login')
        }
      }
    },
    watch: {
      userInfo: function () {

      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../style/mixin';
  #cart_container {
    padding-top:1.9rem;
    padding-bottom: 3rem;
  }
  .cart_list {
    li {
      margin: 10px auto 0;
      width: 100%;
      background-color: #fff;
      h3 {
        width: 90%;
        margin:0 auto;
        padding-top: 0.4rem;
        line-height: 1.2rem;
        @include sc(0.65rem, #434343);
      }
      .item {
        width: 90%;
        margin:0 auto;
        @include fj;
        .img {
          text-align: left;
        }
        .cnt {
          .num {
            text-align: center;
            @include fj;
            flex-wrap: wrap;
            input {
              width: 1.2rem;
              text-align: center;
            }
            .cyc-icon {
              width: 1rem;
              height: 1rem;
              line-height: 0.8rem;
              font-size: 1rem;
              border-radius: 50%;
              border: 1px solid #434343;
            }
          }
          .price {
            padding-top: 0.5rem;
            font-size: 0.8rem;
            color: #fab233;
          }
        }
      }
    }
  }
  .cart_total_price {
    width: 100%;
    margin:10px auto 0;
    padding:0.5rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
  }
  .shopping__cart__checkout {
    display: block;
    background-color: #7ec801;
    text-transform: uppercase;
    color: #fff;
    height: 1.62962rem;
    line-height: 1.62962rem;
    font-size: 0.63703rem;
    text-align: center;
    margin-top: 0.66667rem;
    font-family: Helvetica, arial;
    border-radius: 10px;
  }
</style>
